<template>
  <div class="common-layout">
    <el-container>
      <el-header style="border-style: groove;border-width: 2px;height: 80px;">
         <el-form :inline="true" :model="can" class="demo-form-inline" style="margin-top: 20px;">
            <el-form-item label="名称">
                <el-input v-model="can.userName" placeholder="名称" clearable />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="gettableData()">查询</el-button>
            </el-form-item>
        </el-form>
      </el-header>
      <el-main style="border-style: groove;border-width: 2px;height: 600px;margin-top: 15px;">
        <div style="margin-bottom: 15px;">
            <el-button type="success" @click="upDownExcel()" plain>导出报表</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="userName" label="姓名/请假月份" width="150"/>
            <el-table-column prop="jan" label="一月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.jan!=0" underline="always" type="danger" @click="open(scoped.row,1,'一月')">{{scoped.row.jan}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="feb" label="二月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.feb!=0" underline="always" type="danger" @click="open(scoped.row,2,'二月')">{{scoped.row.feb}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="mar" label="三月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.mar!=0" underline="always" type="danger" @click="open(scoped.row,3,'三月')">{{scoped.row.mar}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="apr" label="四月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.apr!=0" underline="always" type="danger" @click="open(scoped.row,4,'四月')">{{scoped.row.apr}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="may" label="五月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.may!=0" underline="always" type="danger" @click="open(scoped.row,5,'五月')">{{scoped.row.may}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="jun" label="六月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.jun!=0" underline="always" type="danger" @click="open(scoped.row,6,'六月')">{{scoped.row.jun}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="jul" label="七月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.jul!=0" underline="always" type="danger" @click="open(scoped.row,7,'七月')">{{scoped.row.jul}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="aug" label="八月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.aug!=0" underline="always" type="danger" @click="open(scoped.row,8,'八月')">{{scoped.row.aug}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sept" label="九月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.sept!=0" underline="always" type="danger" @click="open(scoped.row,9,'九月')">{{scoped.row.sept}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="oct" label="十月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.oct!=0" underline="always" type="danger" @click="open(scoped.row,10,'十月')">{{scoped.row.oct}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="nov" label="十一月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.nov!=0" underline="always" type="danger" @click="open(scoped.row,11,'十一月')">{{scoped.row.nov}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="dec" label="十二月" width="90" >
                <template v-slot="scoped">
                    <el-link v-if="scoped.row.dec!=0" underline="always" type="danger" @click="open(scoped.row,12,'十二月')">{{scoped.row.dec}}</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.listcount"
            />
        </div>
      </el-main>
    </el-container>
  </div>



  <el-dialog v-model="logic.opens" :title="logic.titles" width="1300" center  draggable >
    <el-table :data="gridData"   style="width: 100%;">
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="departName"  label="部门" />
            <el-table-column prop="typeName"  label="类别" />
            <el-table-column prop="scoped" label="请假时间" width="200">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.startDateTime).format("YYYY-MM-DD")}}至{{moment(scoped.row.endDateTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalHour"  label="总工时">
              <template v-slot="scoped">
                <span>{{ scoped.row.totalHour*8 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="backDateTime"  label="报到时间"  width="120">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.backDateTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="reason"  label="请假事由" width="200"/>    
            <el-table-column prop="leaderName"  label="部门领导" />
            <el-table-column prop="status"  label="审批状态" >
              <template v-slot="scoped">
                <el-tag v-if="scoped.row.status==0" type="primary">待审核</el-tag>
                <el-tag v-if="scoped.row.status==1" type="info">已审核</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark"  label="审批意见">
              <template v-slot="scoped">
                <span v-if="scoped.row.remark==0"></span>
                <el-tag v-if="scoped.row.remark==1" type="success">通过</el-tag>
                <el-tooltip :content="scoped.row.whyRefuse" effect="customized"  v-if="scoped.row.remark==2">
                  <el-tag type="danger">不通过</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="120">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.createTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
        </el-table>
  </el-dialog>
</template>


<script lang="ts" setup>
import { readBasic } from '@/Helper/axiosSetting';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
onMounted(()=>{
    gettableData()
})
const tableData = ref([])
const can=reactive({
    userName:''
})
//分页参数
const page=reactive({
  PageIndex	:1,
    PageSize:15,
    listcount:0
})
//侦听分页数据的变化，刷新列表数据
watch(page,()=>{
  gettableData()
},{deep:true})
const gettableData=()=>{
    readBasic.get("api/Excused/GetExcusedForm",{params:{
        UserName:can.userName,
        PageIndex:page.PageIndex,
        PageSize:page.PageSize,
  }}).then(res=>{
    tableData.value=res.data.data.list
    page.listcount=res.data.data.recordCount
  })
}


//导出报表
const upDownExcel=()=>{
    location.href=`${import.meta.env.VITE_ReadAPP_API_URL}/api/ExcelFile/UpDownExcel`
}


//查看明细请假清单
//打开对话框的实体
const logic=reactive({
    opens:false,
    titles:''
})
//打开对话框
const open=(row:any,month:number,titles:string)=>{
    logic.opens=true;
    logic.titles=row.userName+titles+"份请假明细",
    checkExcuse(row,month)
}

//存放数据的实体
const gridData =ref([])
const checkExcuse=(row:any,month:number)=>{
  readBasic.get("api/Excused/GetExcusedDetail",{params:{
      UserName	:row.userName,
      MonthNum:month,	
  }}).then(res=>{
    gridData.value=res.data.data
  })
}


</script>
<style>
.el-link {
  margin-right: 8px;
}
</style>